<script setup lang="ts">
import { ref, watch } from 'vue';
import axios from 'axios';
import type { ArticleResData, ArticleItem } from '../../../types/data'

const props = defineProps<{
  channelId: number
}>()

const list = ref<ArticleItem[]>([])

// 1.定义文章列表
const getList = async (channelId: number) => {
  const res = await axios.get<ArticleResData>('http://geek.itheima.net/v1_0/articles', {
    params: {
      channel_id: channelId,
      timestamp: +new Date()
      // +new Date()和Date.now()都是获取当前时间戳 timestamp: Date.now()
    }
  })

  list.value = res.data.data.results
  // console.log(res)
}

watch(() => props.channelId, (newVal) => {
  console.log('频道ID变化了:', newVal)
  getList(newVal)
}, {
  // 需要默认执行一次,加载渲染推荐频道的新闻列表
  immediate: true
})


</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="(item,index) in list" :key="index">
      <p class="title">{{ item.title }}</p>
      <img v-for="(img,i) in item.cover.images" class="img" :key="i" :src="img" alt="">
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>